<template>
  <div>
    <div class="container">
      <div class="header">
        <div class="title-wrapper">
          <div class="blue-line"></div>
          <h3>教学数据</h3> 
        </div>
      </div>
      <div class="dashboard-grid">
        <el-card>
          <div slot="header" class="clearfix">
            <span>教学成就趋势图</span>
          </div>
          <TheTeachAchievements/>
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <span>资源建设成果</span>
          </div>
          <TheResourceConstruction/>
        </el-card>
      </div>
    </div>
    <div class="container">
      <div class="header">
        <div class="title-wrapper">
          <div class="blue-line"></div>
          <h3>数据管理</h3> 
        </div>
      </div>
      <div class="dashboard-grid">
        <el-card>
          <div slot="header" class="clearfix">
            <span>教研教改课程数</span>
          </div>
          <TheTeacherResearch/>
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <span>学生实践成果</span>
          </div>
          <TheStudentPractice/>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import TheTeachAchievements from './indexComponents/TheTeachAchievements.vue';
import TheResourceConstruction from './indexComponents/TheResourceConstruction.vue';
import TheTeacherResearch from './indexComponents/TheTeacherResearch.vue';
import TheStudentPractice from './indexComponents/TheStudentPractice.vue';
export default {
  components: { 
    TheTeachAchievements,
    TheResourceConstruction,
    TheTeacherResearch,
    TheStudentPractice
   },
  name: "Index",
  data() {
    return {
      // 版本号
      context: "数据大屏",
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.container{
  margin: 12px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.header {
  margin-bottom: 12px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}
</style>

